<template>
	<div id="visitor-log">
		<el-form :inline="true" :model="query" size="mini" class="query-box" ref="queryForm">
			<el-form-item prop="requestId">
				<el-input v-model="query.requestId" placeholder="请求id" style="width: 120px;" clearable></el-input>
			</el-form-item>
			<el-form-item style="width: 80px;" prop="method">
				<el-select v-model="query.method" placeholder="方法" clearable>
					<el-option label="GET" value="GET"></el-option>
					<el-option label="POST" value="POST"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item style="width: 100px;" prop="ip">
				<el-input v-model="query.ip" placeholder="ip地址" clearable></el-input>
			</el-form-item>
			<el-form-item style="width: 100px;" prop="city">
				<el-input v-model="query.city" placeholder="来源" clearable></el-input>
			</el-form-item>
			<el-form-item style="width: 100px;" prop="os">
				<el-input v-model="query.os" placeholder="系统" clearable></el-input>
			</el-form-item>
			<el-form-item style="width: 100px;" prop="browser">
				<el-input v-model="query.browser" placeholder="浏览器" clearable></el-input>
			</el-form-item>
			<el-form-item style="width: 150px;" prop="uri">
				<el-input v-model="query.uri" placeholder="资源路径" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<date-time-range-picker v-model="query" ref="dataTimeRangePicker"></date-time-range-picker>
			</el-form-item>
			<el-form-item style="width: 80px;" prop="state">
				<el-select v-model="query.state" placeholder="状态" clearable>
					<el-option label="正常" value="1"></el-option>
					<el-option label="异常" value="0"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getData(pager.pageNum,pager.pageSize)">查询</el-button>
				<el-button @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
			<el-table :data="arr" style="width: 100%" border>
				<!-- 展开开始 -->
				<el-table-column type="expand" fixed>
					<template slot-scope="props">
						<el-descriptions title="详情" class="details" border>
							<el-descriptions-item label="id">{{props.row.id}}</el-descriptions-item>
							<el-descriptions-item label="请求id">{{props.row.requestId}}</el-descriptions-item>
							<el-descriptions-item label="uri">{{props.row.uri}}</el-descriptions-item>
							<el-descriptions-item label="请求方法">{{props.row.method}}</el-descriptions-item>
							<el-descriptions-item label="ip来源">{{props.row.city}}</el-descriptions-item>
							<el-descriptions-item label="os">{{props.row.os}}</el-descriptions-item>
							<el-descriptions-item label="浏览器">{{props.row.browser}}</el-descriptions-item>
							<el-descriptions-item label="时间">{{props.row.createTime | DF}}</el-descriptions-item>
							<el-descriptions-item label="参数">{{props.row.params}}</el-descriptions-item>
							<el-descriptions-item label="耗时">
								<el-link :underline="false" :type="getTimeTagType(props.row.time)">{{props.row.time}}ms</el-link>
							</el-descriptions-item>
							<el-descriptions-item label="执行结果">
								<el-tag type="success" v-if="props.row.state" disable-transitions>正常</el-tag>
								<el-tag type="warning" v-else disable-transitions>异常</el-tag>
							</el-descriptions-item>
							<el-descriptions-item label="handler">
								<el-button v-if="props.row.handler" size="medium" @click="catHandler(json(props.row.handler))">{{json(props.row.handler).length}}个</el-button>
								<el-button size="medium"  v-else>无</el-button>
							</el-descriptions-item>
						</el-descriptions>
					</template>
				</el-table-column>
				<el-table-column type="index" width="70" align="center" label="序号"></el-table-column>
				<!-- 展开结束 -->
				<el-table-column prop="id" label="id" align="center" width="100">
				</el-table-column>
			
				<el-table-column label="ip" align="center" prop="ip">
				</el-table-column>
				
				<el-table-column label="状态" width="80" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.state" disable-transitions>正常</el-tag>
						<el-tag type="warning" v-else disable-transitions>异常</el-tag>
					</template>
				</el-table-column>
			
				<el-table-column label="备注" align="center" prop="sign">
				</el-table-column>
			
				<el-table-column label="ip来源" align="center" prop="city">
				</el-table-column>
			
				<el-table-column label="耗时(ms)" width="100" align="center">
					<template slot-scope="scope">
						<el-link :underline="false" :type="getTimeTagType(scope.row.time)">{{scope.row.time}}</el-link>
					</template>
				</el-table-column>
			
				<el-table-column label="时间" width="200" align="center">
					<template slot-scope="scope">
						{{scope.row.createTime | DF}}
						</el-switch>
					</template>
				</el-table-column>
			
				<el-table-column label="os" width="120" align="center">
					<template slot-scope="scope">
						<el-tooltip effect="dark" :content="scope.row.os" placement="top">
							<div class="os short">{{scope.row.os}}</div>
						</el-tooltip>
					</template>
				</el-table-column>
			
				<el-table-column label="浏览器" width="180" align="center">
					<template slot-scope="scope">
						<el-tooltip effect="dark" :content="scope.row.browser" placement="top">
							<div class="browser short">{{scope.row.browser}}</div>
						</el-tooltip>
					</template>
				</el-table-column>
			
				<el-table-column prop="method" label="方法" align="center" width="100">
				</el-table-column>
			
				<!-- <el-table-column label="uri" align="center" width="400">
					<template slot-scope="scope">
						<el-tooltip effect="dark" :content="scope.row.uri" placement="top">
							<div class="uri short">{{scope.row.uri}}</div>
						</el-tooltip>
					</template>
				</el-table-column> -->
			</el-table>
		
		<pagination v-model="pager" @change="getData"></pagination>
		
		<el-dialog v-if="showHandlerTree" title="处理器" :visible.sync="showHandlerTree">
		  <handlerTree :arr="currHandler"></handlerTree>
		</el-dialog>
	</div>
</template>

<script>
	import {$get} from '@/puigins/request.js'
	import {
		parseTime
	} from '@/utils/index.js'
	import pagination from '@/components/common/Pagination.vue'
	import dateTimeRangePicker from '@/components/common/DateTimeRangePicker.vue'
	import handlerTree from '@/components/common/handlerTree.vue'
	export default {
		name: 'VisitorLog',
		created() {
			this.getData(1, this.getDefaultPageSize())
		},
		methods: {
			getData(page, pageSize) {
				this.saveDefaultPageSize(pageSize)
				$get("/admin/manage/visitorLog/getVisitLogList",Object.assign({
					page,
					pageSize
				},this.query)).then(res => {
					if (res.code == 200) {
						this.arr = res.data.list
						this.pager = res.data
					} else {
						console.log(res)
						this.$message.error(res.data)
					}
				})
			},
			resetQuery() {
				this.$refs['queryForm'].resetFields()
				this.query.startTime = ''
				this.query.endTime = ''
				this.$refs['dataTimeRangePicker'].reset()
				this.getData(this.pager.pageNum, this.pager.pageSize)
			},
			getTimeTagType(t){
				if(isNaN(t)) return "info"
				if(t<=200) return "success"
				if(t<=400) return ""
				if(t<=800) return "warning"
				return "danger"
			},
			getDefaultPageSize(){
				let v=window.localStorage.getItem("logPageSize")
				if(v==null||isNaN(v)) return 8
				return parseInt(v)
			},
			saveDefaultPageSize(pageSize){
				window.localStorage.setItem("logPageSize",pageSize)
			},
			catHandler(h){
				this.currHandler=h
				this.showHandlerTree=true
			},
			json(str){
				if(typeof str==='string'){
					try{
						return JSON.parse(str)
					}catch{}
				}
				return str
			}
		},
		data() {
			return {
				arr: [],
				pager: {},
				query: {
					requestId: '',
					method: '',
					ip: '',
					startTime: '',
					endTime: '',
					state: '',
					city:'',
					os:'',
					browser:'',
					uri:''
				},
				currHandler:[],
				showHandlerTree:false
			}
		},
		filters: {
			DF(t) {
				return parseTime(t)
			}
		},
		components: {
			pagination,
			dateTimeRangePicker,
			handlerTree
		}
	}
</script>

<style lang="scss">
	#visitor-log {
		width: 100%;
		display: flex;
		flex-direction: column;

		.data {
			flex: 1;
			overflow: hidden;
		}

		.short {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.city {
			width: 150px;
		}

		.browser {
			width: 150px;
		}

		.os {
			width: 90px;
		}
	}
</style>
